<template>
	<div class="bankcard_box border" id="bankcard">
		<div class="box_top">
			<img src="../../../assets/bankcard.png" height="21" width="28">
			<span>验证银行卡信息</span>
		</div>
		<div class="box_bot">
			<div class="common">
				<div class="lable">身份证号：</div>
				<el-input placeholder="请输入身份证号" :maxlength='18' v-model="input1" :class="{'grey':input1 == ''}" ref="idCard"></el-input>
			</div>
			<div class="common">
				<div class="lable">真实姓名：</div>
				<el-input placeholder="请输入真实姓名" v-model="input2" :class="{'grey':input2 == ''}" ref="name"></el-input>
			</div>
			<div class="common">
				<div class="lable">银行卡号：</div>
				<el-input placeholder="请输入银行卡号" v-model="input3" :maxlength='19' :class="{'grey':input3 == ''}"></el-input>
			</div>
			<div class="common">
				<el-button @click="confirmcommit" :disabled="isDisabled" @keydown.enter.tab.stop.self="confirmcommit">确定</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import Public from '../../../until/public';
	import { AddCard } from '../../../until/getData';
	export default {
	  	data() {
	    	return {
	      		input1: "",			// 身份证号
	      		input2: "",			// 真实姓名
				input3: "",			// 银行卡号
				isDisabled: false
	    	};
		},
		watch:{
			input3(){
				this.change;
			}
		},
	  	methods: {
	    	confirmcommit(){
				let token = Public.getToken();
				let idCard = this.$refs.idCard;
				let name = this.$refs.name;
				let card = this.$refs.card;
				if (this.input1 == '') {
					Public.topAlert('warning', '请输入身份证信息');
					idCard.focus();
				} else if(!Public.idCard(this.input1)) {
					Public.topAlert('warning', '身份证信息有误');
					idCard.focus();
				} else if(this.input2 == ''){
					Public.topAlert('warning', '请输入姓名');
					name.focus();
				} else if(!Public.isFont(this.input2)){
					Public.topAlert('warning', '请输入正确的姓名');
					name.focus();
				} else if(this.input3 == ''){
					Public.topAlert('warning', '请输入银行卡号');
					card.focus();
				} else if(!Public.isBankCard(this.input3)){
					Public.topAlert('warning', '请输入正确的银行卡号');
					card.focus();
				} else{
					let data = {
						pay_account: Public.encrypt(String(this.input3), token)
					}
					AddCard(data).then(res => {
						if (res.code == '1') {
							Public.topAlert('success', res.msg);
							setTimeout(() => {
								this.$router.push({
									name: 'cash'
								})
							}, 2000);
						} else {
							Public.topAlert('error', res.msg);
						}
					}).catch(err => {
						// console.log(err);
					})
				}
	    	}
		}
	};
</script>

<style scoped>
	.bankcard_box {
	  	width: 988px;
	  	height: 538px;
	}
	.bankcard_box .box_top {
	  	height: 37px;
	  	border-bottom: 1px solid #e9e9e9;
	  	padding-top: 12px;
	}
	.bankcard_box .box_top img {
	  	margin-left: 20px;
	  	margin-top: 2px;
	}
	.bankcard_box .box_top span {
	  	text-align: center;
	  	line-height: 25px;
	  	font-size: 16px;
	  	color: #898989;
	  	vertical-align: top;
	}
	.bankcard_box .box_bot {
	  	width: 908px;
	  	height: 490px;
	  	padding: 0 40px;
	}
	.box_bot .common {
	  	display: flex;
	  	margin-top: 22px;
	}
	.box_bot .common:first-child {
	  	margin-top: 45px;
	}
	.common .lable {
	  	width: 90px;
	  	height: 40px;
	  	line-height: 40px;
	  	color: #494949;
	}
	.common .el-button.el-button--default {
	  	width: 280px;
	  	height: 40px;
	  	margin-left: 90px;
	  	background-color: #8a63e7;
	  	border-color: #8a63e7;
	  	color: white;
	  	margin-top: 10px;
	}
</style>